<template>
  <div class="good">
      <div class="menu-wrapper" ref="menuwrapper">
        <ul>
          <li v-for="(item,index) in goods" :key="index" class="menu-item" :class="{'current':currentIndex === index}" @click="selectMenu(index,$event)">
            <span class="text border-1px">
              <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>
              {{item.name}}
            </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper" ref="foodswrapper">
        <ul>
          <li v-for="(item,index) in goods" :key="index" class="food-list food-list-hook">
            <h1 class="title">{{item.name}}</h1>
            <ul>
              <li v-for="(food,index) in item.foods" :key="index" class="food-item border-1px" @click='selectFood(food,$event)'>
                <div class="icon">
                  <img width="54" height="54" :src="food.icon" alt="">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                  </div>
                  <div class="price">
                    <span class="now">${{food.price}}</span><span class="old" v-show="food.oldPrice">${{food.oldPrice}}</span>
                  </div>
                  <div class="cartcontral-warpper">
                    <cartcontral :food='food'></cartcontral>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <shopCart :select-foods='selectFoods' :delivery-price='seller.deliveryPrice' :min-price='seller.minPrice'></shopCart>
      <Food :food='selectedFood' ref="food"></Food>
  </div>
</template>

<script>

import BScroll from 'better-scroll';
import shopCart from "../shopCart/shopCart";
import cartcontral from "../cartcontral/cartcontral";
import Food from "../food/food";

export default {
  props: {
    seller: {
      type: Object
    }
  },
  data() {
    return {
      goods: [
        {
          name: "热销榜",
          type: -1,
          foods: [
            {
              name: "皮蛋瘦肉粥",
              price: 10,
              oldPrice: "",
              description: "咸粥",
              sellCount: 229,
              rating: 100,
              info:
                "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "很喜欢的粥",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "扁豆焖面",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 188,
              rating: 96,
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              info: "",
              icon:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "葱花饼",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 124,
              rating: 85,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "没啥味道",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 1,
                  text: "很一般啊",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "牛肉馅饼",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 114,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "难吃不推荐",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "招牌猪肉白菜锅贴/10个",
              price: 17,
              oldPrice: "",
              description: "",
              sellCount: 101,
              rating: 78,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "不脆,不好吃",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "南瓜粥",
              price: 9,
              oldPrice: "",
              description: "甜粥",
              sellCount: 91,
              rating: 100,
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "红豆薏米美肤粥",
              price: 12,
              oldPrice: "",
              description: "甜粥",
              sellCount: 86,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "八宝酱菜",
              price: 4,
              oldPrice: "",
              description: "",
              sellCount: 84,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "红枣山药糙米粥",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 81,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "糊塌子",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 80,
              rating: 93,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "单人精彩套餐",
          type: 2,
          foods: [
            {
              name: "红枣山药粥套餐",
              price: 29,
              oldPrice: 36,
              description:
                "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
              sellCount: 17,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "冰爽饮品限时特惠",
          type: 1,
          foods: [
            {
              name: "VC无限橙果汁",
              price: 8,
              oldPrice: 10,
              description: "",
              sellCount: 15,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "还可以",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "精选热菜",
          type: -1,
          foods: [
            {
              name: "娃娃菜炖豆腐",
              price: 17,
              oldPrice: "",
              description: "",
              sellCount: 43,
              rating: 92,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "菜量还可以,味道还可以",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "手撕包菜",
              price: 16,
              oldPrice: "",
              description: "",
              sellCount: 29,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "香酥黄金鱼/3条",
              price: 11,
              oldPrice: "",
              description: "",
              sellCount: 15,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "爽口凉菜",
          type: -1,
          foods: [
            {
              name: "八宝酱菜",
              price: 4,
              oldPrice: "",
              description: "",
              sellCount: 84,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "拍黄瓜",
              price: 9,
              oldPrice: "",
              description: "",
              sellCount: 28,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "精选套餐",
          type: -1,
          foods: [
            {
              name: "红豆薏米粥套餐",
              price: 37,
              oldPrice: "",
              description: "红豆薏米粥,三鲜干蒸烧卖,拍黄瓜",
              sellCount: 3,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "皮蛋瘦肉粥套餐",
              price: 31,
              oldPrice: "",
              description: "",
              sellCount: 12,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "果拼果汁",
          type: -1,
          foods: [
            {
              name: "蜜瓜圣女萝莉杯",
              price: 6,
              oldPrice: "",
              description: "",
              sellCount: 1,
              rating: "",
              info: "",
              ratings: [],
              icon:
                "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "加多宝",
              price: 6,
              oldPrice: "",
              description: "",
              sellCount: 7,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "VC无限橙果汁",
              price: 8,
              oldPrice: 10,
              description: "",
              sellCount: 15,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "还可以",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "小吃主食",
          type: -1,
          foods: [
            {
              name: "扁豆焖面",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 188,
              rating: 96,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "葱花饼",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 124,
              rating: 85,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "没啥味道",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 1,
                  text: "很一般啊",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "牛肉馅饼",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 114,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "难吃不推荐",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "招牌猪肉白菜锅贴/10个",
              price: 17,
              oldPrice: "",
              description: "",
              sellCount: 101,
              rating: 78,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "不脆,不好吃",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "糊塌子",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 80,
              rating: 93,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "特色粥品",
          type: -1,
          foods: [
            {
              name: "皮蛋瘦肉粥",
              price: 10,
              oldPrice: "",
              description: "咸粥",
              sellCount: 229,
              rating: 100,
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "很喜欢的粥",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "南瓜粥",
              price: 9,
              oldPrice: "",
              description: "甜粥",
              sellCount: 91,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "红豆薏米美肤粥",
              price: 12,
              oldPrice: "",
              description: "甜粥",
              sellCount: 86,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "红枣山药糙米粥",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 81,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "鲜蔬菌菇粥",
              price: 11,
              oldPrice: "",
              description: "咸粥",
              sellCount: 56,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: ""
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              name: "田园蔬菜粥",
              price: 10,
              oldPrice: "",
              description: "咸粥",
              sellCount: 33,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        }
      ],
      listHeight:[],
      scrollY:0,
      selectedFood:{}
    };
  },
  created() {
    this.classMap = ["decrease", "discount", "special", "invoice", "guarantee"];
    this.$nextTick(function(){
      this._initBS()
      this._calculataeHeight()
    })
  },
  computed:{
    currentIndex(){
      for(let i = 0;i<this.listHeight.length;i++){
        let height1 = this.listHeight[i]
        let height2 = this.listHeight[i+1]
        if(!height2||(this.scrollY>=height1&&this.scrollY<height2)){
          return i
        }
      }
      return 0
    },
    selectFoods(){
      let foods = []
      this.goods.forEach((good)=>{
        good.foods.forEach((food)=>{
          if(food.count){
            foods.push(food)
          }
        })
      })
      return foods
    },
  },
  methods:{
    selectMenu(index,event){
      if(!event._constructed){
        return
      }//为了防止在pc端触发原生事件  我们只让他触发自定义的事件
      console.log(index)
      let foodLIst =this.$refs.foodswrapper.getElementsByClassName('food-list-hook')
      let el = foodLIst[index]
      this.foodsScroll.scrollToElement(el,300)
    },
    selectFood(food,event){
       if(!event._constructed){
        return
      }//为了防止在pc端触发原生事件  我们只让他触发自定义的事件
      console.log(food)
      this.selectedFood  = food
      this.$refs.food.show()//调用子组件的方法 并不是数据逻辑还是子组件进行操作的 在子组件绑定ref属性
    },
    _initBS(){
      this.menuScroll = new BScroll(this.$refs.menuwrapper,{
        click:true
      })

      this.foodsScroll = new BScroll(this.$refs.foodswrapper,{
        probeType:3,
        click:true
      })

      this.foodsScroll.on('scroll',(pos)=>{
        this.scrollY = Math.abs(Math.round(pos.y))
        // console.log(t0his.scrollY)
      })
    },
    _calculataeHeight(){
      let foodLIst = this.$refs.foodswrapper.getElementsByClassName('food-list-hook')
      // console.log(foodLIst)
      let height = 0
      this.listHeight.push(height);
      for(let i= 0;i<foodLIst.length;i++){
        let item = foodLIst[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    }
  },
  components: {
    shopCart:shopCart,
    cartcontral:cartcontral,
    Food:Food
  }
};
</script>


<style lang="stylus" scoped>
@import '../../common/stylus/mixin.styl';

.good {
  display: flex;
  position: absolute; // 直接开启bfc  需要设置宽高才行明确4边的位置
  width: 100%;
  // left 10px
  // right 10px
  top: 174px;
  bottom: 64px;
  overflow: hidden;

  .menu-wrapper {
    width: 80px;
    background-color: #f3f5f7;

    .menu-item {
      display: table; // 做垂直居中的效果
      height: 54px;
      width: 56px;
      padding: 0 12px;
      line-height: 14px;
      &.current{
        position:relative;
        z-index:10;
        margin-top:-1px
        background:#fff;
        font-weight:700
        .text{
          border-none()
        }
      }
    }

    .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: top;
      margin-right: 6px;
      background-size: 16px 16px;
      background-repeat: no-repeat;

      &.decrease {
        bg-image('decrease_3');
      }

      &.discount {
        bg-image('discount_3');
      }

      &.guarantee {
        bg-image('guarantee_3');
      }

      &.invoice {
        bg-image('invoice_3');
      }

      &.special {
        bg-image('special_3');
      }
    }

    .text {
      display: table-cell; // 做垂直居中的效果
      width: 56px;
      vertical-align: middle; // 做垂直居中的效果
      border-1px(rgba(7, 17, 27, 0.1));
      font-size: 12px;
    }
  }

  .foods-wrapper {
    flex: 1;

    .title {
      padding-left: 14px;
      height: 26px;
      line-height: 26px;
      border-left: 2px solid #d9dde1;
      font-size: 12px;
      color: rgb(147, 153, 159);
      background: #f3f5f7;
    }

    .food-item {
      display: flex;
      margin: 18px;
      padding-bottom: 18px;
      border-1px(rgba(7, 17, 27, 0.1));

      &:last-child {
        border-none();
        margin-bottom: 0;
      }

      .icon {
        flex: 0 0 57px;
        margin-right: 10px;
      }

      .content {
        flex: 1;

        .name {
          margin: 2px 0 8px 0;
          height: 14px;
          line-height: 14px;
          font-size: 14px;
          color: rgb(7, 17, 27);
        }
        .desc,.extra{
          line-height:10px
          font-size:10px
          color:rgb(147,153,159)
        }
        .desc{
          margin-bottom 8px
        }
        .extra{
          margin-right 12px
          .count{
            margin-right 12px
          }
        }
        .price{
          font-weight:700
          line-height:24px
          .now{
            margin-right:8px
            font-size:14px
            color:rgb(240,20,20)
          }
          .old{
            text-decoration:line-through
            font-size:10px
            color:rgb(147,153,159)
          }
        }
        .cartcontral-warpper{
          position absolute
          right 0
          bottom 12px
        }
      }
    }
  }
}
</style>

